<template>
  <div style="overflow: hidden;height: 100%;">
    <el-row :gutter="12" style="" type='flex'>
      <el-col :span="14" style="height: 100%;">
        <div style="display: flex;flex-direction: column;height: 100%;">
          <div style="" :color="['#025d6d']">
            <div style="font-size: 18px;text-align: center;font-weight: bold;color: white;">
              资产方隐患整改情况
            </div>
            <el-table fit :data="tableData1" style="width: 100%;margin:0 auto; "
              :header-row-style="{ fontSize: '14px', fontWeight: 'bold', color: 'white' }"
              :row-style="rowStyleFormat" border>
              <el-table-column prop="typeName" label="统计类型" align="center" min-width="160px">
              </el-table-column>
              <el-table-column prop="score1" label="Jan" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score2" label="Feb" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score3" label="Mar" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score4" label="Apr" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score5" label="May" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score6" label="Jun" align="center" min-width="50px">

              </el-table-column>
              <el-table-column prop="score7" label="Jul" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score8" label="Aug" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score9" label="Sep" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score10" label="Oct" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score11" label="Nov" align="center" min-width="50px">
              </el-table-column>
              <el-table-column prop="score12" label="Dec" align="center" min-width="50px">
              </el-table-column>

            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="10" style="clear: both;padding-top: 23px;">
        <dv-border-box-10 :color="['#025d6d']" style="">
          <div style="height: 100%;position: relative;">
            <div style="height:100%;" ref="echarts1"> </div>
          </div>
        </dv-border-box-10>
      </el-col>

    </el-row>

    <el-row :gutter="12" style="padding-bottom: 7px;" type='flex'>
      <el-col :span="14">
        <div style="padding-top: 10px;" :color="['#025d6d']">
          <div style="font-size: 18px;text-align: center;font-weight: bold;color: white;">
            企业隐患整改情况
          </div>
          <el-table fit :data="tableData2" style="width: 100%;margin:0 auto; "
            :header-row-style="{ fontSize: '14px', fontWeight: 'bold', color: 'white' }"
            :row-style="rowStyleFormat" border>
            <el-table-column prop="typeName" label="统计类型" align="center" min-width="160px">
            </el-table-column>
            <el-table-column prop="score1" label="Jan" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score2" label="Feb" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score3" label="Mar" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score4" label="Apr" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score5" label="May" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score6" label="Jun" align="center" min-width="50px">

            </el-table-column>
            <el-table-column prop="score7" label="Jul" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score8" label="Aug" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score9" label="Sep" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score10" label="Oct" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score11" label="Nov" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score12" label="Dec" align="center" min-width="50px">
            </el-table-column>

          </el-table>
        </div>
      </el-col>
      <el-col :span="10" style="padding-top: 30px;">
        <dv-border-box-10 :color="['#025d6d']" style="flex: 1;">
          <div style="height: 100%;position: relative;">
            <div style="height:100%;" ref="echarts2"> </div>
          </div>
        </dv-border-box-10>
      </el-col>
    </el-row>

    <el-row :gutter="12" style="padding-bottom: 7px;" type='flex'>
      <el-col :span="14">
        <div style="padding-top: 10px;" :color="['#025d6d']">
          <div style="font-size: 18px;text-align: center;font-weight: bold;color: white;">
            载体隐患整改情况
          </div>
          <el-table fit :data="tableData3" style="width: 100%;margin:0 auto; "
            :header-row-style="{ fontSize: '14px', fontWeight: 'bold', color: 'white' }"
            :row-style="rowStyleFormat" border>
            <el-table-column prop="typeName" label="统计类型" align="center" min-width="160px">
            </el-table-column>
            <el-table-column prop="score1" label="Jan" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score2" label="Feb" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score3" label="Mar" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score4" label="Apr" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score5" label="May" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score6" label="Jun" align="center" min-width="50px">

            </el-table-column>
            <el-table-column prop="score7" label="Jul" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score8" label="Aug" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score9" label="Sep" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score10" label="Oct" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score11" label="Nov" align="center" min-width="50px">
            </el-table-column>
            <el-table-column prop="score12" label="Dec" align="center" min-width="50px">
            </el-table-column>

          </el-table>
        </div>
      </el-col>

      <el-col :span="10" style="padding-top: 30px;">
        <dv-border-box-10 :color="['#025d6d']" style="">
          <div style="height: 100%;position: relative;">
            <div style="height: 100%" ref="echarts3"> </div>
            <!-- <div class="menu_title">载体整改统计</div> -->
          </div>
        </dv-border-box-10>
      </el-col>

    </el-row>
  </div>
</template>
<script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/pieOption1';
import { tableData1, tableData2, tableData3 } from './data/data1';
import pie1 from './charts/pie1';
import pie2 from './charts/pie2';

import CheckMark from '@/components/checkMark';
import { queryCarryDangerList } from '@/service/carryDanger';
export default {
  components: { CheckMark },
  data() {
    return {
      loading: true,
      tableHeight: 650,
      value: '1',
      tableData1,
      tableData2,
      tableData3,
      option1: {},
    };
  },
  methods: {
    loadCharts() {
      this.option1 = pieOption1;
      const myChart1 = this.$echarts.init(this.$refs.echarts1);
      // pie1.series[0].data[0].value = 17;
      // pie1.series[0].data[1].value = 12;

      myChart1.setOption(pie1);

      const myChart2 = this.$echarts.init(this.$refs.echarts2);
      myChart2.setOption(pie2);

      const myChart3 = this.$echarts.init(this.$refs.echarts3);
      myChart3.setOption(pieOption1);

      window.onresize = function () {
        //自适应大小
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
      };
    },
    clickItem(compny_name) {
      console.log('compny_name', compny_name);
    },
    rowStyleFormat({ rowIndex, row }) {
      if (rowIndex == 3) {
        return { fontSize: '12px', color: 'transparent' };
      } else {
        return { fontSize: '12px', color: 'white' };
      }
    },
    sumCount(data) {
      if (!data) {
        return 0;
      }
      return (
        parseInt(data.score1) +
        parseInt(data.score2) +
        parseInt(data.score3) +
        parseInt(data.score4) +
        parseInt(data.score5) +
        parseInt(data.score6) +
        parseInt(data.score7) +
        parseInt(data.score8) +
        parseInt(data.score9) +
        parseInt(data.score10) +
        parseInt(data.score11) +
        parseInt(data.score12)
      );
    },
    async loadTable() {
      const res = await queryCarryDangerList({
        ...this.form,
        page_no: this.page_no,
        page_size: this.page_size,
      });
      if (res.dataList) {
        this.tableData1 = res.dataList.filter(
          (item) => item.targetName == '资产方隐患'
        );
        const types = [
          '隐患数量',
          '整改完成数量',
          '整改完成率',
          '截至当月累计隐患数量',
          '截至当月累计整改数量',
          '累计完成率',
        ];
        let tData = [];
        for (let type of types) {
          for (let d of this.tableData1) {
            if (d.typeName == type) {
              if (type == '截至当月累计隐患数量') {
                tData.push({ targetName: '', typeName: '  .' });
              }
              tData.push(d);
            }
          }
        }
        this.tableData1 = tData;

        this.tableData2 = res.dataList.filter(
          (item) => item.targetName == '企业隐患'
        );
        tData = [];
        for (let type of types) {
          for (let d of this.tableData2) {
            if (d.typeName == type) {
              if (type == '截至当月累计隐患数量') {
                tData.push({ targetName: '', typeName: '  .' });
              }
              tData.push(d);
            }
          }
        }
        this.tableData2 = tData;

        this.tableData3 = res.dataList.filter(
          (item) => item.targetName == '载体隐患'
        );
        tData = [];
        for (let type of types) {
          for (let d of this.tableData3) {
            if (d.typeName == type) {
              if (type == '截至当月累计隐患数量') {
                tData.push({ targetName: '', typeName: '  .' });
              }
              tData.push(d);
            }
          }
        }
        this.tableData3 = tData;
      }
      let pieData1 = this.tableData1.filter(
        (item) => item.typeName == '整改完成数量'
      );
      const finish1 = this.sumCount(pieData1[0]);
      pieData1 = this.tableData1.filter((item) => item.typeName == '隐患数量');
      const find1 = this.sumCount(pieData1[0]);

      console.log('this.tableData1', this.tableData1);
    },
  },

  mounted() {
    const vm = this;
    // for (let d of tableData1) {
    //   for (let key in d) {
    //     console.log('key', key);
    //     if (!d[key]) {
    //       d[key] = '-';
    //     }
    //   }
    // }
    // for (let d of tableData2) {
    //   for (let key in d) {
    //     console.log('key', key);
    //     if (!d[key]) {
    //       d[key] = '-';
    //     }
    //   }
    // }
    // for (let d of tableData3) {
    //   for (let key in d) {
    //     console.log('key', key);
    //     if (!d[key]) {
    //       d[key] = '-';
    //     }
    //   }
    // }
    this.loadTable();

    setTimeout(() => {
      vm.loadCharts();
    }, 500);
  },
};
</script>
<style scoped>
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td,
::v-deep .el-table th.el-table__cell {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}

::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}

::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table .el-table__cell {
  padding: 3px 0px;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

.el-table .cell {
  padding-left: 1px;
  padding-right: 1px;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 3px;
}

/deep/ .active_dot_green-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: green;
}

/deep/ .active_dot_red-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}

.menu_title {
  width: 120px;
  height: 40px;
  position: absolute;
  top: 0px;
  line-height: 40px;
  font-size: 14px;
  font-family: 微软雅黑;
  font-weight: bold;
  color: white;
  border-top-left-radius: 3px;
  background: url('~assets/bg_menu.png') no-repeat;
  background-size: 100% 100%;
}
</style>